<html>
	<head>
		<script src='../npm/dist/WebAudioFontPlayer.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/0320_Chaos_sf2_file.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/12836_6_JCLive_sf2_file.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/12838_6_JCLive_sf2_file.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/12842_6_JCLive_sf2_file.js'></script>
		<script src='https://surikov.github.io/webaudiofontdata/sound/0300_Chaos_sf2_file.js'></script>
		<script>
			var AudioContextFunc = window.AudioContext || window.webkitAudioContext;
			var audioContext = new AudioContextFunc();
			var player = new WebAudioFontPlayer();
			var bpm = 120;
			var N = 4 * 60 / bpm;
			var pieceLen = 4 * N;
			var beatLen=1/8 * N;
			var C = 0;
			var Cs= 1;
			var D = 2;
			var Ds= 3;
			var E = 4;
			var F = 5;
			var Fs= 6;
			var G = 7;
			var Gs= 8;
			var A = 9;
			var As= 10;
			var B = 11;
			var started = false;
			var startTime = 0;
			player.loader.decodeAfterLoading(audioContext, '_drum_36_6_JCLive_sf2_file');
			player.loader.decodeAfterLoading(audioContext, '_drum_38_6_JCLive_sf2_file');
			player.loader.decodeAfterLoading(audioContext, '_drum_42_6_JCLive_sf2_file');
			player.loader.decodeAfterLoading(audioContext, '_tone_0320_Chaos_sf2_file');
			player.loader.decodeAfterLoading(audioContext, '_tone_0300_Chaos_sf2_file');
			var currentGuitar=_tone_0300_Chaos_sf2_file;
			var currentSnare=_drum_38_6_JCLive_sf2_file;
			var currentSnarePitch=38;
			function guitar(pitch, duration){return {preset:currentGuitar,pitch:12*4+pitch,duration:duration*N,volume:0.25};}
			function bass(pitch, duration){return {preset:_tone_0320_Chaos_sf2_file,pitch:12*2+pitch,duration:duration*N,volume:0.4};}
			function drum(){return {preset:_drum_36_6_JCLive_sf2_file,pitch:36,duration:1,volume:0.3};}
			function snare(){return {preset:currentSnare,pitch:currentSnarePitch,duration:1,volume:0.85};}
			function hihat(){return {preset:_drum_42_6_JCLive_sf2_file,pitch:42,duration:1,volume:0.25};}
			function selectGuitar(o){
				var n=document.getElementById('guitar').selectedIndex;
				var info=player.loader.instrumentInfo(n)
				console.log('selectGuitar',n,info);
				player.loader.startLoad(audioContext, info.url, info.variable);
				player.loader.waitLoad(function () {
					console.log('done',info.variable);
					currentGuitar=window[info.variable];
					player.cancelQueue(audioContext);
					started=false;
					start();
				});
			}
			function selectSnare(o){
				var n=document.getElementById('snare').selectedIndex;
				var info=player.loader.drumInfo(n)
				console.log('selectGuitar',n,info);
				player.loader.startLoad(audioContext, info.url, info.variable);
				player.loader.waitLoad(function () {
					console.log('done',info.variable);
					currentSnare=window[info.variable];
					currentSnarePitch=info.pitch;
					player.cancelQueue(audioContext);
					started=false;
					start();
				});
			}
			function beats(notes) {
				for (var n = 0; n < notes.length; n++) {
					var beat = notes[n];
					for (var i = 0; i < beat.length; i++) {
						if (beat[i]) {
							player.queueWaveTable(audioContext, audioContext.destination, beat[i].preset, startTime + n * beatLen , beat[i].pitch, beat[i].duration, beat[i].volume);
						}
					}
				}
			}
			function start() {
				if (started) {
					console.log('started already');
				} else {
					started = true;
					startTime = audioContext.currentTime + 0.1;
					nextPiece();
					startTime = startTime + pieceLen;
					setInterval(function () {
						if (audioContext.currentTime > startTime - 1 / 4 * N) {
							nextPiece();
							startTime = startTime + pieceLen;
						}
					}, 20);
				}
			}
			function nextPiece() {
				beats([
////////////////////////////////////////////////////////////////////////////////////				
 [guitar(D,1/8),guitar(G,1/8),		bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),		drum(),				hihat()]
,[guitar(F,1/8),guitar(As,1/8),		bass(G,1/8),				snare(),	hihat()]
,[									bass(G,1/8),							hihat()]
,[guitar(G,1/4),guitar(C,1/4),		bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),							hihat()]
,[guitar(G,1/16),					bass(G,1/8),				snare(),	hihat()]
,[guitar(D,1/8),guitar(G,1/8),		bass(G,1/8),							hihat()]
,[									bass(G,1/8),		drum(),				hihat()]
,[guitar(F,1/8),guitar(As,1/8),		bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),				snare(),	hihat()]
,[guitar(Gs,1/8),guitar(Cs,1/8),	bass(G,1/8),							hihat()]
,[guitar(G,1/4),guitar(C,1/4),		bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),							hihat()]
,[guitar(G,1/16),					bass(G,1/8),				snare(),	hihat()]
,[									bass(G,1/8),							hihat()]
,[guitar(D,1/8),guitar(G,1/8),		bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),		drum(),				hihat()]
,[guitar(F,1/8),guitar(As,1/8),		bass(G,1/8),				snare(),	hihat()]
,[									bass(G,1/8),							hihat()]
,[guitar(G,1/8),guitar(C,1/8),		bass(C,1/8),		drum(),				hihat()]
,[									bass(C,1/8),							hihat()]
,[guitar(G,1/16),					bass(C,1/8),				snare(),	hihat()]
,[guitar(F,1/8),guitar(As,1/8),		bass(As,1/4),							hihat()]
,[														drum(),				hihat()]
,[guitar(D,5/8),guitar(G,5/8),		bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),				snare(),	hihat()]
,[									bass(G,1/8),							hihat()]
,[									bass(G,1/8),		drum(),				hihat()]
,[									bass(G,1/8),				snare(),	hihat()]
,[guitar(G,1/16),					bass(F,1/8),				snare(),	hihat()]
,[									bass(Fs,1/8),				snare(),	hihat()]
////////////////////////////////////////////////////////////////////////////////////
				]);
			}
		</script>
	</head>
	<body>
		<p><a href="#" onmousedown="start();">start</a> example</p>
		<p>Guitar <select id='guitar' onchange="selectGuitar(this)"></select></p>
		<p>Snare drum <select id='snare' onchange="selectSnare(this)"></select></p>
		<hr/>
		<p><a href="https://surikov.github.io/webaudiofont/">source</a></p>
		<script>
			var sel = document.getElementById('guitar');
			for(var i = 0; i < player.loader.instrumentKeys().length; i++) {
				var opt = document.createElement('option');
				opt.innerHTML = ''+(i+1)+'. '+player.loader.instrumentInfo(i).title;
				if(i==340){
					opt.selected = 'selected'
				}
				sel.appendChild(opt);
			}
			sel = document.getElementById('snare');
			for(var i = 0; i < player.loader.drumKeys().length; i++) {
				var opt = document.createElement('option');
				opt.innerHTML = ''+(i+1)+'. '+player.loader.drumInfo(i).title;
				if(i==17){
					opt.selected = 'selected'
				}
				sel.appendChild(opt);
			}
			console.log(player.loader);
		</script>
	</body>
</html>
